<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

    <title>个人资料</title>

    <link href="../assets/css/admin.css" rel="stylesheet" type="text/css">
    <link href="../assets/css/amazeui.css" rel="stylesheet" type="text/css">

    <link href="../css/personal.css" rel="stylesheet" type="text/css">
    <link href="../css/infstyle.css" rel="stylesheet" type="text/css">
    <link type="text/css" href="../js/sweetalert/sweetalert.css" rel="stylesheet"/>

    <script src="../assets/js/jquery.min.js" type="text/javascript"></script>
    <script src="../assets/js/amazeui.js" type="text/javascript"></script>
    <script type="text/javascript" src="../js/common.js"></script>
    <script type="text/javascript" src="../js/sweetalert/sweetalert.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap3.js"></script>
</head>

<body>
<!--头 -->
<header th:replace="mall/header::header-user"></header>
<nav th:replace="mall/header::header-search"></nav>
<b class="line"></b>
<div class="center">
    <div class="col-main">
        <div class="main-wrap">

            <div class="user-info">
                <!--标题 -->
                <div class="am-cf am-padding">
                    <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">个人资料</strong> / <small>Personal&nbsp;information</small></div>
                </div>
                <hr/>

                <!--头像 -->
                <div class="user-infoPic">

                    <div class="filePic">
                        <input type="file" class="inputPic" allowexts="gif,jpeg,jpg,png,bmp" accept="image/*">
                        <img class="am-circle am-img-thumbnail" src="../images/getAvatar.do.jpg" alt="" />
                    </div>

                    <p class="am-form-help">头像</p>

                    <div class="info-m">
                        <div><b>用户名：<i th:text="${mallUser.nickName}">小叮当</i></b></div>
                    </div>
                </div>

                <!--个人信息 -->
                <div class="info-main">
                    <form class="am-form am-form-horizontal">

                        <div class="am-form-group">
                            <label class="am-form-label">昵称</label>
                            <div class="am-form-content">
                                <input type="text" id="nickName" th:value="${mallUser.nickName}" placeholder="昵称">

                            </div>
                        </div>

                        <div class="am-form-group">
                            <label class="am-form-label">个人签名</label>
                            <div class="am-form-content">
                                <input type="text" id="introduceSign" placeholder="说说自己吧" th:value="${mallUser.introduceSign}" >

                            </div>
                        </div>
                        <div class="am-form-group">
                            <label class="am-form-label">收货地址</label>
                            <div class="am-form-content">
                                <input type="text" id="address" placeholder="一句话写完" th:value="${mallUser.address}" >

                            </div>
                        </div>

                        <div class="info-btn">
                            <div class="am-btn am-btn-danger" id="saveButton">保存修改</div>
                        </div>

                    </form>
                </div>

            </div>

        </div>
        <!--底部-->
        <div th:replace="mall/footer::footer-fragment"></div>
    </div>

    <aside class="menu">
        <ul>
            <li class="person">
                <a href="#">个人中心</a>
            </li>
            <li class="person">
                <ul>
                    <li class="active"> <a href="#">个人信息</a></li>
                    <li> <a href="/personal/safe">安全设置</a></li>
                </ul>
            </li>
            <li class="person">
                <ul>
                    <li><a href="/order/all">订单管理</a></li>
                </ul>
            </li>

        </ul>

    </aside>
</div>

</body>
<script type="text/javascript">
    $('#saveButton').click(function () {
        var address = $("#address").val();
        if (address.trim().length < 10) {
            swal("请输入正确的收货信息,长度要长", {
                icon: "error",
            });
            return;
        }
        var introduceSign = $("#introduceSign").val();
        if (introduceSign.trim().length < 4) {
            swal("请输入正确的个性签名", {
                icon: "error",
            });
            return;
        }
        var nickName = $("#nickName").val();
        if (nickName.trim().length < 2) {
            swal("请输入正确的昵称", {
                icon: "error",
            });
            return;
        }
        var data = {
            "address": address,
            "introduceSign": introduceSign,
            "nickName": nickName
        };
        $.ajax({
            type: 'POST',//方法类型
            url: '/personal/updateInfo',
            contentType: 'application/json',
            data: JSON.stringify(data),
            success: function (result) {
                if (result.resultCode == 200) {
                    // window.location.reload();
                    swal("操作成功", {
                      icon: "success",
                    });
                } else {
                    swal(result.message, {
                        icon: "error",
                    });
                }
                ;
            },
            error: function () {
                alert('操作失败');
            }
        });
    });
</script>
</html>